<template>
  <div>
    <kaki-table-demo
      ref="table"
      :requestUrl="'/api/staff/cards?include=cards_type'"
      :rawOption="raw"
      :operation="operation"
      :searchExtend="searchExtend"
    ></kaki-table-demo>

    <!--这是编辑/转卡时候的弹框-->
    <el-dialog title="编辑" :visible.sync="updateCardFormVisible">
      <update-card @updateCardReloadList="updateCardReloadList" :updateId="updateId" ></update-card>
    </el-dialog>
  </div>
</template>

<script>
  import KakiTableDemo from 'components/KakiTableDemo'
  import updateCard from 'views/user/updateCard'
  import { Delete, GetAllCardType } from '@/api/member'

  export default {
    name: 'table_demo',
    components: {
      KakiTableDemo,
      updateCard
    },
    data(){
      return {
        updateId: null,
        updateCardFormVisible: false,
        cardName: {
          times: '次卡',
          date: '时间卡',
          clock: '时段卡'
        },
        searchExtend: [
          {
            templateType: 'select',
            searchWord: 'cards_type_id',
            valueModel: '',
            placeholder: '请选择卡种类',
            option: []
          }
        ],
        raw: [
          {
            label: 'ID',
            propName: 'id'
          },
          {
            label: '姓名',
            propName: 'name'
          },
          {
            label: '性别',
            propName: 'sex'
          },
          {
            propName: 'mobile',
            label: '联系电话'
          },
          {
            label: '卡类型',
            formatter: (row) => {
              return `${this.cardName[row.cards_type.data.type]}   (${row.cards_type.data.title})`
            }
          },
          {
            label: '开始日期',
            propName: 'start_date'
          },
          {
            label: '结束日期',
            propName: 'end_date'
          },
          {
            label: '开始时间',
            propName: 'clock_start_time'
          },
          {
            label: '结束时间',
            propName: 'clock_end_time'
          },
          {
            label: '次数',
            propName: 'times'
          },
        ],
        operation: [
          {
            buttonText: '编辑',
            buttonClick: (e) => {
              this.updateId = e.id
              this.updateCardFormVisible = true
            }
          },
          {
            buttonText: '删除',
            buttonType: 'danger',
            buttonClick: (e) => {
              console.info('action: delete')
              this.$confirm('此操作将删除一条记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                Delete(e.id).then( () => {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  this.$refs.table.loadTable()
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              });
            }
          }
        ]
      }
    },
    methods: {
      handleUpdate(row) {
        this.updateCardFormVisible = true
        this.updateId = row.id
      },
      updateCardReloadList () {
        this.updateCardFormVisible = false
        this.$refs.table.loadTable()
      },
    },
    async mounted() {
      const CardType = await GetAllCardType()
      let array = []
      CardType.data.forEach((item, index) => {
        array[index] = {
          label: item.title,
          value: item.id
        }
      })
      this.searchExtend[0].option = array
    }
  }
</script>
